<template>
    <div class="footer-box" >
        <div class="left-play" @click="handleDetail()">
            <img :src="playList[playListIndex]?.al?.picUrl">
            <div class="footer-text">
                <p>{{ playList[playListIndex]?.name }}</p>
                <span>横滑切换上下首哦</span>
            </div>
        </div>
        <div class="right-play">
            <van-icon v-if="isPlaying == true" name="pause-circle-o" size="0.5rem" @click="handlePlay" />
            <van-icon v-else name="play-circle-o" size="0.5rem" @click="handlePlay" />
            <van-icon name="bars" size="0.5rem" />
        </div>
        <audio  ref="audio"
            :src="`https://music.163.com/song/media/outer/url?id=${playList[playListIndex].id}.mp3`"></audio>
            <van-popup  v-model:show="isShow" position="bottom" :style="{ height: '100%' }" >
                <SongDetail  :currentSong="playList[playListIndex]" @playMusic="handlePlay" @updateAudio="updateAudioTime" :durationTime="durationTime" />
    </van-popup>
    </div>
    
</template>

<script lang="ts">
import { computed, onMounted, reactive, ref, watch } from "vue";
import { defineComponent,onUpdated } from "vue";
import { mapState, mapActions, mapMutations } from "vuex";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import SongDetail from "@/components/SongDetail/SongDetail.vue";
export default {
    components:{
        SongDetail
    },

    setup() {
        // const isPlaying=ref(false)
        const router=useRouter()
        const store=useStore()
        let state=reactive({
            playInterval:null,
            // currentId:0
        })
        const audio = ref(null)
        console.log(audio)

        let currentPlayTime=ref(0)
        const durationTime=ref(0)
        // durationTime.value=audio.value.duration*1000
        //    console.log(durationTime.value)     
        // console.log(currentPlayTime)
        let playList=computed(()=>store.state.playList)
       let isShow=computed(()=>store.state.isDetailShow)
        let playListIndex=computed(()=>store.state.playListIndex)
        let isPlaying=computed(()=>store.state.isPlaying)
        //  state.currentId=playList.value[playListIndex.value]?.id
        function updatePlayTime(){
            state.playInterval=setInterval(()=>{
                 currentPlayTime.value=parseInt((Number(audio.value.currentTime)*1000).toFixed(0))
                store.commit("changePlayTime",currentPlayTime.value)
            },100)
        }
        onMounted(()=>{
            console.log(audio)
            audio.value.ondurationchange=function(){
                durationTime.value=(audio.value.duration*1000)
            console.log(durationTime.value)
            }
            // durationTime.value=(audio.value.duration*1000)
            // console.log(durationTime.value)
           
            // currentPlayTime.value=audio.value.currentTime
            store.dispatch("getCurrentLyric",{id:playList.value[playListIndex.value].id})
        })
        onUpdated(()=>{
           
            audio.value.ondurationchange=function(){
                durationTime.value=(audio.value.duration*1000)
            console.log(durationTime.value)
            }
            store.dispatch("getCurrentLyric", { id: playList.value[playListIndex.value].id })
        })
        watch(playListIndex,(newV,oldV)=>{
            // store.commit("changePlayTime",0)
            store.dispatch("getCurrentLyric",{id:playList.value[playListIndex.value].id})
        })
        watch(playList,(newV,oldV)=>{
            store.dispatch("getCurrentLyric",{id:playList.value[playListIndex.value].id})
        })
        watch( currentPlayTime,(newV,oldV)=>{
            console.log(currentPlayTime.value)
        })
        // watch(,(newV,oldV)=>{
        //    updatePlayTime()
        //     if(isPlaying.value===false){
        //         clearInterval(state.playInterval)
        //     }
        // })
       function updateAudioTime(millSec){
        audio.value.currentTime=millSec/1000
       }
          
        
        function handlePlay() {
            console.log(store.state.isPlaying)
            if (store.state.isPlaying == false) {
                console.log(1)
                store.commit("changePlaying")
                audio.value.play()
                updatePlayTime()
            } else {
                
                store.commit("changePlaying")
                audio.value.pause()
                clearInterval(state.playInterval)
            }


        }
        function handleDetail(){
           store.commit("changeDetailShow")
        }
        watch(playListIndex,(newVal,oldVal)=>{

            console.log(newVal)
            // audio.value.autoplay=true
            // console.log(1)
        })
        watch(isPlaying,(newVal,oldVal)=>{
            console.log(newVal)
           
            if(oldVal==false&&newVal==true)
            {
                updatePlayTime()
 durationTime.value=(audio.value.duration*1000)
                audio.value.play()
                audio.value.autoplay=true
            }else{
                clearInterval(state.playInterval)
            }
            
        })
        
        return {
            audio,
            isShow,
            playList,
            playListIndex,
            handlePlay,
            handleDetail,
            isPlaying,
            updateAudioTime,
            durationTime

        };
    },
    //vue2写法
    // computed: {
    //     ...mapState(["playList", "playListIndex", "isPlaying"])
    // },
    //不需要这个，直接commit mutation
    // methods:{
    //     ...mapMutations(["changePlaying"])
    // }
};
</script>

<style lang="less" scoped>
.footer-box {
    display: flex;

    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;

    .left-play {
        padding: 0.3rem;
        display: flex;
        align-items: center;

        img {
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 50%;
        }

        .footer-text {
            margin-left: 0.2rem;

            span {
                color: gray;
                font-size: small;
            }
        }
    }

    .right-play {
        padding: 0.3rem;
        display: flex;
        gap: 0.3rem;
    }
}
</style>